

//colors  一个网站所用到的基本颜色
// 定义一个颜色数组 变量名冲突 要用引号引起来
$colors: (
   "primary": #e74e4e,
   "primary-1": #815506,
   "info": #4b67af,
   "white": #fff,
   "light": #f9f9f9,
   "light-1": #d4d9de,
   "dark-1": #333,
   "dark": #222,
   "grey-1": #666,
   "grey": #999,
   "black-1": #343440,
   "black": #000,
   "skyblue": skyblue,
   "blue": blue,
   "blue-1": #1f3695,
   "danger": #791a15,
   "pink": #f92472,
   

);
// 定义一个边款颜色
$border-color: #f5f5f5;
// 文字背景颜色
// 把上面定义的 color 变量 遍历生成对应的类
@each $colorKey,$color in $colors {
	.text-#{$colorKey} {
		color: $color
	}
	.bg-#{$colorKey} {
		background-color: $color
	}
}
//text overflow
.text-ellipsis {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; // 不换行
}
//text对齐方式   sass 语法
//定义字体的 布局  定义工具类
@each $var in (left, center, right) {
	.text-#{$var} {
		text-align: $var
	}
}
// 定义 字体 数组

$font-size: (xxs: 8px,xs:10px,sm:12px,md:13px,lg: 14px,xl:16px,xxl: 18px,xxxl: 20px,big: 26px);
$base-font-size: 13px;


// 生成字体 大小 工具类
@each $sizeKey,$size in $font-size {
	.fs-#{$sizeKey} {
		font-size: $size
	}
}

//flex  定义对齐方式 的class
.d-flex {
	display: flex;
}
//换行
.flex-wrap {
	flex-wrap: wrap;
}
// 垂直 对齐
.flex-column{
	flex-direction: column;
}
//水平 对齐
$flex-jc: (
    start: flex-star,
    end: flex-end,
    center:center,
    between: space-between,
    around: space-around,
);

@each $key,$value in $flex-jc {
	.jc-#{$key} {
		justify-content:  $value
	}
}

$flex-ai: (
    start: flex-star,
    end: flex-end,
    center:center,
    stretch: stretch,
);
// 垂直对齐
@each $key,$value in $flex-ai {
	.ai-#{$key} {
		align-items:  $value
	}
}

.flex-1 { // 撑满 整行
	flex: 1;
}

.flex-grow-1 {
	flex-grow: 1;
}

//spacing  定义边距类

$space-type: (m: margin, p: padding);
$space-directons: (t: top, b: bottom, r:right, l: left);
$space-base-size: 1rem;
$space-size: (0: 0, 1: 0.25, 2: 0.5, 3: 1, 4: 1.5, 5: 3);

@each $typeKey,$type in $space-type {

    @each $sizeKey,$size in $space-size {
			//.m-1 { margin: 0.25rem; }
			.#{$typeKey}-#{$sizeKey} {
		         #{$type}:  $size * $space-base-size
	        }
	}

	@each $sizeKey,$size in $space-size {
			//.mx-1 { margin: 0.25rem; }
			.#{$typeKey}x-#{$sizeKey} {
		         #{$type}-left:  $size * $space-base-size;
		         #{$type}-right:  $size * $space-base-size
	        }

	        .#{$typeKey}y-#{$sizeKey} {
		         #{$type}-top:  $size * $space-base-size;
		         #{$type}-bottom:  $size * $space-base-size
	        }
	}


	@each $directionKey,$directon in $space-directons {
		@each $sizeKey,$size in $space-size {
			//.mt-1 { margin-top: 0.25rem; }
			.#{$typeKey}#{$directionKey}-#{$sizeKey} {
		         #{$type}-#{$directon}:  $size * $space-base-size
	        }
		}
	}

}


// 第一按钮类

.btn {
	border: none;
	border-radius: 0.2238rem;
	font-size: 12px;
	padding: 0.2rem 0.6rem;
	height: 24px;
	&.btn-1 {
		
		i {
			color: map-get($colors,'primary');
			font-size: 1.3rem;
			padding-right: 10px;
		}
		padding: 5px 10px;
		border: 1px solid #f5f7fa;
		background-color: #f5f7fa;
		height: 37px;
		
		font-size: 1rem
	}
}

//nav 

.nav {
	.nav-item {
		display: inline-block;
		border-bottom: 3px solid transparent;
		padding-bottom: 0.2rem;
	}
	.active {
		border-bottom: 3px solid #fff;
	}
	.active1 {
		color: #db9e3f;
		border-bottom: 3px solid #db9e3f;
	}
}

.w-100 {
	width: 100%;
}
.h-100 {
	height: 100%;
}

// borders 
@each $dir in (top,right,bottom,left) {
	.border-#{$dir} {
		border-#{$dir}: 1px solid $border-color;
	}
}

.text-h {
	line-height: 1.5rem
} 
//主题图标
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.text-c {
   text-align: center;
}